<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>漂浮标签输入框</title>
</head>
<style>
	body {
	    height: 100vh;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    background-color: #e8e8e8;
	}
	
	.formField {
	    margin: 10px;
	    position: relative;
	}
	
	.formField input {
	    padding: 10px 15px;
	    outline: none;
	    border: none;
	    border-radius: 5px;
	    background-color: #f1f1f1;
	    color: #333;
	    font-size: 16px;
	    font-weight: 550;
	    transition: 0.3s ease-in-out;
	    box-shadow: 0 0 0 5px transparent;
	}
	
	.formField input:hover,
	.formField input:focus {
	    box-shadow: 0 0 0 2px #333;
	}
	
	.formField span {
	    position: absolute;
	    left: 0;
	    top: 0;
	    padding: 8px 15px;
	    color: #333;
	    font-size: 16px;
	    font-weight: 600;
	    transition: 0.3s ease-in-out;
	    pointer-events: none;
	}
	
	.formField input:focus+span,
	.formField input:valid+span {
	    transform: translateY(-32px) translateX(-5px) scale(0.95);
	    transition: 0.3s ease-in-out;
	}
</style>

<body>
    <form class="formField">
        <input required="" type="text" />
        <span>Placeholder</span>
    </form>
</body>

</html>